Work in progress look of footer

The design is looking good. A couple questions/comments:

• Is it possible to remove the MIT icon from the left side of the footer?
• Can you please add -'s between the footer items

Here's the mockup

The design is looking good. A couple questions/comments:

• Is it possible to remove the MIT icon from the left side of the footer?
• Can you please add -'s between the footer items

• Made the logo configurable
• Added "-" between links
• Linked Contact to configurable email.

There is this issue when there is a line break

We don't need that "Choose Language" form. Will it still appear even when edx-platform is configured for just one language?

@briangrossman question for you -- if the logos and link targets are configurable, can we use this for xPRO (and Residential MITx) as well?

We don't need that "Choose Language" form. Will it still appear even when edx-platform is configured for just one language?

No, it depends if you want to display it or not. I activated to test responsiveness and if link would display correctly with it On.

@briangrossman question for you -- if the logos and link targets are configurable, can we use this for xPRO (and Residential MITx) as well?

@pdpinch I'm not as familiar with Residential, but this footer is very similar to xPRO. xPRO also has a Support Center link, which wouldn't work in MITx Online yet. If the code would skip elements that didn't have the link target set, I'd say this works for xPRO and MITx Online at a minimum.

We should have a support center for mitxonline in a few weeks, so it would be worth adding that. However, there is no support center for Residential, so the link should be conditional on whether the environment variable is set.

Added conditional support center link with configurable url and text.

@Wassaf-Shahzad
Regarding the screenshot above where you mention the issue when there is a line break, take a look at the footer in xPRO. It's set up with a break point so that it's either:

• all on one line
• fully stacked with one item per line

I think that approach would work fine in this case. Particularly with the addition of another item (Support center)

@Wassaf-Shahzad Regarding the screenshot above where you mention the issue when there is a line break, take a look at the footer in xPRO. It's set up with a break point so that it's either:

• all on one line
• fully stacked with one item per line

I think that approach would work fine in this case. Particularly with the addition of another item (Support center)

@briangrossman
The code Identical to MITxOnline however I was under the impression that we could break the single row into multiple rows (as shown in the image above) before finally going to one item per line strategy as the screen size is reduced but as we only have two strategies (described above) I have updated the breakpoint and attached an updated image

@Wassaf-Shahzad related to this image that you attached. If you look at the footer level then English and apply drop list are not seems me aligned.

https://user-images.githubusercontent.com/87968618/135615361-f3bded77-c092-4c47-9d05-2203cd2c6399.png

The language selector is not needed in this component. I enabled it in the above image to test responsiveness.

@Wassaf-Shahzad if we are not using the Language Selector then I think the existing logic should be refactor or hidden by some environment variables. It is hidden by default ? How do you enable it ?

<Footer
          onLanguageSelected={() => {}}
          supportedLanguages={[
            { label: 'English', value: 'en' },
            { label: 'Español', value: 'es' },
          ]}
        />

supportedLanguages={[
        { label: 'English', value: 'en' },
        { label: 'Español', value: 'es' },
      ]}
    />

The language selector is enabled by passing a prop to the footer.It is disabled by default (as no prop is passed) and we can refactor it to use and environment variable but that depends if it is needed.